<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>幸运大转盘</title>
    <style>
        body, html {
            height: 100%;
            width: 100%;
            overflow: hidden;
            background-image: linear-gradient(to right, #ffc3a0 0%, #ffafbd 100%);
        }

        .box {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            flex-direction: row;
        }

        #huaji {
            transition: all 3s ease-in-out;
        }

        #button {
            position: absolute;
            top: 140px;
            left: 140px;
            transform: scale(0.5, 0.5);
            transition: all .25s ease-in-out;
        }

        #button:hover {
            transform: scale(0.6, 0.6);
            transition: all .25s ease-in-out;
        }

        .turntable {
            width: 580px;
            height: 580px;
            position: relative
        }

        .info {
            width: 500px;
            height: 500px;
            border-radius: 24px;
            border: #333 3px solid;
            box-shadow: #666 0 0 30px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
        }

        .info::-webkit-scrollbar {
            opacity: 0.1;
            width: 0.01px;
        }

        .info-header {
            height: 40px;
            font-size: 30px;
            font-weight: bold;
            border-bottom: #333 3px solid;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .info-container {
            height: 460px;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
        }

        @keyframes loading {
            from {
                transform: scale(1.0, 1.0);
            }
            to {
                transform: scale(1.1, 1.1);
            }
        }

        .info-pre {
            margin: 0 auto;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            flex-direction: column;
            animation: loading 1s ease-in-out infinite alternate;
        }

        .info-item {
            width: 150px;
            height: 120px;
            margin: 10px 6px;
            border: #333 2px solid;
            border-radius: 16px;
        }

        .info-item-prize {
            height: 90px;
            border-bottom: #333 2px solid;
            font-size: 30px;
            font-weight: bold;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .info-item-user {
            text-align: center;
        }
    </style>
    <script>
        var count = 0;

        function bb() {
            if (count === 0) {
                fetch('http://10.20.238.177/getData').then(function (value) {
                    value.text().then(function (res) {
                        var data = JSON.parse(res);
                        console.log(data);
                        var deg = data[data.length - 1].deg;
                        document.getElementById('huaji').style.transform = "rotate(-" + (parseInt(deg) + 3600) + "deg)";
                        setTimeout(function () {
                            var info = document.getElementById('info-container');
                            var pre = document.getElementById('info-pre');
                            info.removeChild(pre);
                            data.map(function (item) {
                                console.log(item);
                                var info = document.getElementById('info-container');
                                var node = document.createElement('div');
                                node.innerHTML = "<div class=\"info-container\">\n" +
                                    "            <div class=\"info-item\">\n" +
                                    "                <div class=\"info-item-prize\">" + item.prize + "</div>\n" +
                                    "                <div class=\"info-item-user\">" + item.ip + "</div>\n" +
                                    "            </div>\n" +
                                    "        </div>";
                                info.appendChild(node);
                            });
                            count += 1;
                        }, 3000)
                    })
                })
            }
            else {
                alert("还抽？还抽？还想抽？找抽是吧！？")
            }
        }
    </script>
</head>
<body>
<div class="box">
    <div class="turntable">
        <img id="huaji" src="http://cdn.algbb.fun/ImageMessages/BB_1541944054847"/>
        <img onclick="bb()" id="button" src="http://cdn.algbb.fun/ImageMessages/BB_1541944844976">
    </div>
    <div class="info" id="info">
        <div class="info-header">获 奖 信 息</div>
        <div class="info-container" id="info-container">
            <div class="info-pre" id="info-pre">
                <h1>还没有抽奖就想偷看？？？</h1>
                <img src="http://cdn.algbb.fun/emoji/32.png" width="300px">
            </div>
        </div>
    </div>
</div>
</body>
</html>
